<template>
  <HModal v-model="visible" title="权限条件控制" @ok="handleOK" :width="900" :height="600">
    <div class="sub-form-auth-condition-config-item" v-for="(item, index) in dataSource">
      <div class="sub-form-auth-condition-config-item-button-container">
        <div class="button" @click="() => addNew(index)" style="margin-bottom: 25px"><span><a-icon type="plus"/></span>
        </div>
        <div class="button" @click="() => remove(item)"><span><a-icon type="minus"/></span></div>
      </div>
      <div style="margin: 0 5px;">如果:</div>
      <FormulaTextAreaConfig
        style="flex: 0.6" :formDefinition="formDefinition"
          v-model="item.formula" :title="item.formulaTitle"
        @update:title="t => item.formulaTitle = t"
        :variableContainerConfig="variableContainerConfig"/>

      <div style="margin: 0 10px;">则为:</div>
      <SubFormActionConfig
        style="flex: 0.4" :subFormAuth="item"
        :formDefinition="formDefinition"
        :subFormAction="subFormAction"/>
    </div>
  </HModal>
</template>
<script>
import HModal from '@comp/hhd/HModal/HModal.vue';
import {createProps} from '@/utils';
import FormulaTextAreaConfig
  from '@comp/hhd/design/FormDesigner/field/comps/form/FieldValueFormulaGroups/configs/FormulaTextAreaConfig.vue';
import SubFormActionConfig from '@comp/hhd/design/FormAction/SubFormActionConfig.vue';
import {createSubFormAuthFormula} from '@comp/hhd/design/FormDesigner/types';

export default {
  name: 'SubFormAuthConditionConfig',
  components: {
    SubFormActionConfig,
    FormulaTextAreaConfig,
    HModal
  },
  props: {
    action: createProps(Object, () => undefined),
    formDefinition: createProps(Object, () => undefined)
  },
  data() {
    return {
      subFormAction: undefined,
      visible: false,
      dataSource: []
    };
  },
  methods: {
    setData({subFormAction, dataSource}) {
      this.subFormAction = subFormAction;
      this.dataSource = JSON.parse(JSON.stringify(dataSource || []));
      if (!this.dataSource.length) {
        this.addNew(0);
      }
      this.open();
    },
    open() {
      this.visible = true;
    },
    close() {
      this.visible = false;
    },
    addNew(index) {
      this.dataSource.splice(index + 1, 0, createSubFormAuthFormula());
    },
    remove(item) {
      this.dataSource = this.dataSource.filter(i => i !== item);
      if (!this.dataSource.length) {
        this.addNew(0)
      }
    },
    check(list) {
      if (list.length > 1) {
        for (let i = 0; i < list.length; i++) {
          let item = list[i];
          if (!item.formula) {
            this.$message.warn('请配置条件');
            return false;
          }
        }
      }
      if (!list[0].formula) {
        list.splice(0, 1);
      }
      return true;
    },
    handleOK() {
      let list = JSON.parse(JSON.stringify(this.dataSource));
      if (!this.check(list)) return;
      list.forEach(item => {
        item.actionId = this.action.id;
        item.subFormId = this.subFormAction.subFormId;
        item.formId = this.formDefinition.id;
      });

      let subFormAuthFormulas = this.formDefinition.subFormAuthFormulas || [];
      subFormAuthFormulas = [...subFormAuthFormulas]
      subFormAuthFormulas = subFormAuthFormulas.filter(item => {
        if (item.subFormId === this.subFormAction.subFormId && item.actionId === this.action.id) {
          return false;
        }
        return true;
      });
      subFormAuthFormulas.push(...list);
      this.close();
      this.$nextTick(() => {
        this.formDefinition.subFormAuthFormulas = subFormAuthFormulas;
      })
    }
  },
  computed: {
    variableContainerConfig() {
      let formIds = [(this.formDefinition.subForms || []).map(i => i.id), this.formDefinition.id].toString();
      return {
        containers: ['formVariable'],
        formDefinition: this.formDefinition,
        formIds
      };
    }
  }
};
</script>
<style>
.sub-form-auth-condition-config-item {
  display: flex;
}

.sub-form-auth-condition-config-item-button-container .button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 15px;
  color: white !important;
  background: #296fbe;
  cursor: pointer;
  margin-bottom: 25px;
  border-radius: 2px;
}

.sub-form-auth-condition-config-item-button-container {
  width: 35px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>